<template>
    <div class="company">
        <postHead  :showAction="false"></postHead>
        <div class="onestep" v-show="oneStep">
            <div class="company_title">
                <span>企业信息</span>
            </div>
            <div class="company_div">
                <div class="cd_title">
                    <span>*</span>
                    <span>企业名称</span>
                </div>
                <div class="cd_input">
                    <input placeholder="请填写企业名称" v-model="form.name" />
                </div>
            </div>
            <div class="company_div">
                <div class="cd_title">
                    <span>*</span>
                    <span>统一社会信用代码</span>
                </div>
                <div class="cd_input">
                    <input placeholder="请填写统一社会信用代码(上传营业执照后可自动识别)" v-model="form.creditCode" />
                </div>
            </div>
            <div class="company_div">
                <div class="cd_title">
                    <span>*</span>
                    <span>上传营业执照</span>
                </div>
                <div class="cd_upload">
                    <div class="imgdiv">
                        <img src="">
                    </div>
                    <div class="upload_div">
                        <i class="iconfont icon-jiahao"></i>
                    </div>
                </div>
            </div>
            <div class="company_div">
                <div class="cd_title">
                    <span>*</span>
                    <span>联系人</span>
                </div>
                <div class="cd_input">
                    <input placeholder="请填写联系人" v-model="form.contactName" />
                </div>
            </div>
            <div class="company_div">
                <div class="cd_title">
                    <span>*</span>
                    <span>手机号码</span>
                </div>
                <div class="cd_input">
                    <input placeholder="手机号码" v-model="form.phone" />
                </div>
            </div>
            <div class="company_div">
                <div class="cd_title">
                    <span></span>
                    <span>座机号码</span>
                </div>
                <div class="cd_input">
                    <input placeholder="请填写座机号码" v-model="form.landlineNumber" />
                </div>
            </div>
            <div class="company_div">
                <div class="cd_title">
                    <span>*</span>
                    <span>工作邮箱</span>
                </div>
                <div class="cd_input">
                    <input placeholder="请填写工作邮箱" v-model="form.email" />
                </div>
            </div>
            <div class="lbl_div" v-if="!form.email && !form.phone && !form.contactName && !form.creditCode && !form.name">
                <span>下一步</span>
            </div>
            <div class="code_btn_div" v-else @click="oneStep=false">
                <span>下一步</span>
            </div>
        </div>
        <div class="twostep" v-show="!oneStep">
            <div class="company_title">
                <span>企业信息</span>
            </div>
            <div class="select_div">
                <div class="sd_left">
                    <div class="sdl_title">
                        <span>*</span>
                        <span>企业规模</span>
                    </div>
                    <div class="sdl_input" @click="showScaleDialog">
                        <span v-if="!form.enterpriseScale">请选择</span>
                        <span v-else style="color: #333333;">{{form.enterpriseScaleName}}</span>
                        <i class="iconfont icon-xiangxia"></i>
                    </div>
                </div>
                <div class="sd_right">
                    <div class="sdl_title">
                        <span>*</span>
                        <span>企业行业</span>
                    </div>
                    <div class="sdl_input" @click="showIndustryDialog">
                        <span v-if="!form.enterpriseIndustry">请选择</span>
                        <span v-else style="color: #333333;">{{form.enterpriseIndustryName}}</span>
                        <i class="iconfont icon-xiangxia"></i>
                    </div>
                </div>
            </div>
            <div class="select_div">
                <div class="sd_left">
                    <div class="sdl_title">
                        <span>*</span>
                        <span>企业性质</span>
                    </div>
                    <div class="sdl_input" @click="showEnterpriseNatureDialog">
                        <span v-if="!form.enterpriseNature">请选择</span>
                        <span v-else style="color: #333333;">{{form.enterpriseNatureName}}</span>
                        <i class="iconfont icon-xiangxia"></i>
                    </div>
                </div>
                <div class="sd_right">
                    <div class="sdl_title">
                        <span>*</span>
                        <span>上市类型</span>
                    </div>
                    <div class="sdl_input" @click="showListingTypeDialog">
                        <span v-if="!form.listingType">请选择</span>
                        <span v-else style="color: #333333;">{{form.listingTypeName}}</span>
                        <i class="iconfont icon-xiangxia"></i>
                    </div>
                </div>
            </div>
            <div class="select_div">
                <div class="sd_left">
                    <div class="sdl_title">
                        <span>*</span>
                        <span>年度营收（产能）</span>
                    </div>
                    <div class="sdl_input" @click="showAnnualRevenueDialog">
                        <span v-if="!form.annualRevenue">请选择</span>
                        <span v-else style="color: #333333;">{{form.annualRevenueName}}</span>
                        <i class="iconfont icon-xiangxia"></i>
                    </div>
                </div>
                <div class="sd_right">
                    <div class="sdl_title">
                        <span>*</span>
                        <span>员工人数约</span>
                    </div>
                    <div class="sdl_input" @click="showStaffsNumDialog">
                        <span v-if="!form.staffsNum">请选择</span>
                        <span v-else style="color: #333333;">{{form.staffsNumName}}</span>
                        <i class="iconfont icon-xiangxia"></i>
                    </div>
                </div>
            </div>

            <div class="select_div">
                <div class="sd_left">
                    <div class="sdl_title">
                        <span></span>
                        <span>官网</span>
                    </div>
                    <div class="sdl_input">
                        <input placeholder="请填写官网" v-model="form.officialWebsite"/>
                        <!-- <span>请选择</span>
                        <i class="iconfont icon-xiangxia"></i> -->
                    </div>
                </div>
                <div class="sd_right">
                    <div class="sdl_title">
                        <span></span>
                        <span>微信公众号</span>
                    </div>
                    <div class="sdl_input">
                        <input placeholder="请填写微信公众号" v-model="form.wechatOfficialAccount"/>
                        <!-- <span>请选择</span>
                        <i class="iconfont icon-xiangxia"></i> -->
                    </div>
                </div>
            </div>

            <div class="two_bottom">
                <div class="twb_div" @click="sureEdit">
                    <span>跳过这一步</span>
                </div>
                <div class="twb_next" @click="sureEdit">
                    <span>完成</span>
                </div>
            </div>
        </div>

        <van-popup v-model="showScale" position="bottom">
            <van-picker
                :title="dialogTitle"
                show-toolbar
                :columns="columns"
                @confirm="onConfirmScale"
                @cancel="onCancelScale">
            </van-picker>

        </van-popup>


        <van-popup v-model="showIndustry" position="bottom">
           
            <van-picker show-toolbar title="标题"  @confirm="onConfirmIndustry" @cancel="onCancelIndustry" :columns="enterpriseIndustry" />

        </van-popup>
       
    </div>
</template>

<script>
import postHead  from '@/components/postHead.vue';

import homeapi from '@/api/api.js';
export default {
    name: 'company',
    data() {
        return {
            name: "",
            creditCode: "",
            licenceImg: "",
            contactName: "",
            phone: "",
            landlineNumber: "",
            email: "",
            oneStep:true,
            enterpriseScale:[],
            showScale:false,
            showIndustry:false,
            enterpriseIndustry:[],

            activeId:[],
            activeIndex:0,
            dialogTitle:"",
            columns:[],



            form:{
                annualRevenue:"",
                annualRevenueName:'',
                contactName:"",
                creditCode:"",
                email:"",
                enterpriseIndustry:"",
                enterpriseIndustryName:"请选择",
                enterpriseNature:"",
                enterpriseNatureName:"",
                enterpriseScale:"",
                enterpriseScaleName:"请选择",
                landlineNumber:"",
                licenceImg:"https://www.baidu.com",
                listingType:"",
                listingTypeName:"",
                name:"",
                officialWebsite:"",
                phone:"",
                staffsNum:"",
                staffsNumName:'',
                wechatOfficialAccount:"",
                columnsData:[],
            },


            selectType:'',
        }
    },
    components: {
        postHead
    },
    mounted(){
        this.getDictList();
        this.getIndustryList();
    },
    methods:{
        //获取字典
        async getDictList(){
            let data=await homeapi.getDictList();
            if(data.code==200){
                this.columnsData=data.result
            }
        },
        

        //获取行业列表
        async getIndustryList(){
            let data=await homeapi.getIndustryList();
            if(data.code==200){
                data.result.map(res=>{
                    res.text=res.name;
                    if(res.child.length>0){
                        res.child.map(json=>{
                            json.text=json.name
                        })
                        res.children=res.child;
                        res.children.map(json=>{
                            if(json.child.length>0){
                                json.child.map(item=>{
                                    item.text=item.name
                                })
                                json.children=json.child

                            }
                            else{
                                json.children=[
                                    {
                                        text:json.text,
                                        id:json.id
                                    }
                                ]
                            }
                        })
                    }
                    else{
                        res.children=[
                            {
                                text:res.text,
                                children:[{
                                    text:res.text,
                                    id:res.id
                                }]
                            }
                        ]
                    }
                })
                
                this.enterpriseIndustry=data.result
                
            }
        },
        showScaleDialog(){
            this.dialogTitle="选择企业规模"
            this.showScale=true;
            this.columns=this.columnsData.enterpriseScale;
            this.selectType="enterpriseScale"
        },
        showEnterpriseNatureDialog(){
            this.dialogTitle="选择企业性质"
            this.showScale=true;
            this.columns=this.columnsData.enterpriseNature
            this.selectType="enterpriseNature"
        },

        showListingTypeDialog(){
            this.dialogTitle="选择上市类型"
            this.showScale=true;
            this.columns=this.columnsData.listingType
            this.selectType="listingType"
        },
        showAnnualRevenueDialog(){
            this.dialogTitle="选择年度营收"
            this.showScale=true;
            this.columns=this.columnsData.annualRevenue
            this.selectType="annualRevenue"
        },
        showStaffsNumDialog(){
            this.dialogTitle="选择员工人数"
            this.showScale=true;
            this.columns=this.columnsData.staffsNum
            this.selectType="staffsNum"
        },




        showIndustryDialog(){
            this.showIndustry=true;
        },
        onConfirmScale(item){
            console.log(item)
            this.form[this.selectType]=item.value
            this.form[this.selectType+'Name']=item.text;

            // this.form.enterpriseScaleName=item.text;
            // this.form.enterpriseScale=item.value
            this.onCancelScale();
        },
        onCancelScale(){
            this.showScale=false;
        },
        onConfirmIndustry(item,indexList){
            let idList=[];
            console.log(this.enterpriseIndustry)
         
            if(indexList.length==3){
                let idFirst=indexList[0]
                idList.push(this.enterpriseIndustry[idFirst].id);
                idList.push(this.enterpriseIndustry[idFirst].children[indexList[1]].id)
                idList.push(this.enterpriseIndustry[idFirst].children[indexList[1]].children[indexList[2]].id)
            }
            else{

            }
            console.log(item)
            this.onCancelIndustry();
            this.form.enterpriseIndustry=idList.join(",")
            this.form.enterpriseIndustryName=item.join("->")
            console.log(this.form.enterpriseIndustry)
            console.log(this.form.enterpriseIndustryName)
        },
        onCancelIndustry(){
            this.showIndustry=false;
        },
        //确认完善信息

        async sureEdit(){
            let form=this.form;
            this.$toast.loading({
                title:"加载中...",
                duration:0,
            })
            let data=await homeapi.editCompany(form);
            if(data.code==200){
                this.$toast("信息完善成功");
                this.$router.push("/")
            }
        }
    }
}
</script>
<style scoped lang="less">
.onestep{
    max-width: 600px;
    margin: 0 auto;
}
.twostep{
    max-width: 600px;
    margin: 0 auto;
}
.company {
    width: 100%;
    padding: 0 .4rem;
    box-sizing: border-box;
    display: inline-block;
    background: #ffffff;
    height: 100vh;
    font-size: 16px;
}

.company_title {
    width: 100%;
    font-size: .48rem;
    color: #333333;
    font-weight: bold;
    line-height: .64rem;
    margin-top: .8rem;
}

.company_div {
    width: 100%;
    display: inline-block;

}

.cd_title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: .5333rem;
    font-size: 16px;
}

.cd_input {
    width: 100%;
    height: 1.0667rem;
    margin-top: .1067rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid #DEDEDE;
}

.cd_input input {
    width: 100%;
    height: 1.0667rem;
    border: 0px;
    outline: none;
}

.cd_title span:first-child {
    color: #FF1515;
    margin-right: .1333rem;
}

.lbl_div {
    width: 100%;
    height: 1.1733rem;
    background: #F5F5F5;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .3733rem;
    color: #999999;
    margin-top: 1.0667rem;
}

.cd_upload {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: .32rem;
}

.upload_div {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: .1067rem;
    border: 1px solid #E6E6E6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload_div .iconfont {
    font-size: .4267rem;
    color: #999999;
}
.select_div{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: .5333rem;
}
.sd_left{
    flex: 1;
    padding-right:.4rem;
    box-sizing: border-box;
}
.sd_right{
    flex: 1;
    padding-right:.4rem;
    box-sizing: border-box;
}
.sdl_title{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.sdl_title span:first-child{
    font-size: .32rem;
    color: #FF1515;
    line-height:.4267rem;
}
.sdl_title span:last-child{
    font-size:.32rem;
    margin-left: .12rem;
    color: '#333333';
    line-height: .4267rem;
}
.sdl_input{
    width: 100%;
    margin-top: 8px;
    height: 1.0667rem;
    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    border-bottom: 1px solid #DEDEDE;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: .4rem;
    box-sizing: border-box;
}
.sdl_input span{
    font-size: .3733rem;
    color: #999999;
}
.sdl_input .iconfont{
    font-size: .32rem;
    color: #999999;
}
.two_bottom{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    position: fixed;
    left: 0;
    bottom: 1.8667rem;
}
.twb_div{
    width: 3.2rem;
    height: 1.1733rem;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: .3733rem;
   color: #333333;
}
.twb_next{
    width: 3.2rem;
    height: 1.1733rem;
    background: #F5F5F5;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .3733rem;
    color: #999999;
}
.sdl_input input{
    width: 100%;
    height: 100%;
    border: 0px;
    outline: none;
    font-size: .32rem;
}
.code_btn_div{
    width: 100%;
    height: 1.1733rem;
    background: #F5792A;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2.1333rem;
    font-size: .3733rem;
    color: #ffffff;
}
</style>